<template>
	<div>
		<div class="basc-info-card mt10" v-if="vList && vList.length > 0"
			:style="{ maxHeight: stateHooks.leftHeight - 360 + 'px', overflow: 'auto' }">
			<div v-for="(item, index) in vList" :key="'item' + index">
				<div class="flex_row">
					<div class="mb-box-cell flex1">
						<div class="flex_between">
							<div class="flex_row" style="width: 40%;overflow: hidden;">
								<div class="obj-gdimg-box">
									<img :src="item.gdimg" alt="" class="obj-avatar">
								</div>
								<div class="ml10" style="flex: 1;overflow: hidden;">
									<div class="bold font_size14" style="max-width: 100%;">{{ item.gdname || '--' }}
									</div>
									<div class="flex_row font_size12" v-if="item.spec_title">
										<span>{{ item.spec_title }}</span>
									</div>
									<div class="flex_row font_size12">
										<div class="">
											<span>总数量：</span>
											<span class="bold font_size14">{{ Number(item.number).toFixed(0) }}</span>
										</div>
										<div class="ml10">
											<span>已{{ titleTName }}：</span>
											<span class="font_red bold font_size14">{{ Number(item.number_inout).toFixed(0)
												}}</span>
										</div>
										<div class="ml10">
											<span>待{{ titleTName }}：</span>
											<span class="font_green bold font_size14">{{ Number(item.number_not).toFixed(0)
												}}</span>
										</div>
									</div>
									<div class="font_size12">
										<span>库存：</span>
										<span>{{ item.qty }}</span>
										<span class="ml5 mr5"> ≈ </span>
										<span>{{ item.qty }}</span>
										<span>{{ item.unit_title || '' }}</span>
									</div>
								</div>
							</div>
							<div style="flex: 1;justify-items: flex-end;">
								<div class="obj-info">
									<div class="price-input-row flex_row">
										<div class="price-input-item ">
											<span class="mr5">{{ titleTName }}价:</span>
											<el-input-number disabled v-model="item.price" :precision="2" :step="1"
												:min="0" size="small" controls-position="right"
												@change="onPriceChange(index, 'price', $event)" class="price-input">
											</el-input-number>
											<span class="ml5">({{ '元' }})</span>
										</div>
										<div class="price-input-item ml20">
											<span class="mr5">本次{{ titleTName }}量:</span>
											<el-input-number v-model="item.dri_number_not" :min="0"
												:max="Number(item.number_not)" size="small"
												controls-position="right"
												@change="onPriceChange(index, 'number', $event)" class="number-input">
											</el-input-number>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex_center_column mt10 mb20 font_black9"> 已加载完所有数据~ </div>
		</div>
		<div class="total-summary-box" v-if="vList && vList.length > 0">
			<div class="total-item">
				<span class="total-label">{{ titleTName }}累计金额</span>
				<span class="total-amount">￥{{ totalPrice ? totalPrice.toFixed(2) : '0.00' }}</span>
			</div>
			<div class="total-divider"></div>
			<div class="total-item">
				<span class="total-label">{{ titleTName }}合计数量</span>
				<span class="total-quantity">{{ totalNumber || '0' }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { watch, computed, defineProps, defineEmits, ref, getCurrentInstance, nextTick } from '@vue/composition-api';
const { proxy } = getCurrentInstance()
import config from "@/js/conf/Config.js"
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
import { useOrderReceiptState } from '@/pages/warehouseManage/hooks/useOrderReceiptState.js'
const { stateHooks } = useCommonHooks()
const { tabType, getEventInfo, query } = useOrderReceiptState()
import util from '@/js/util/Util.js'

const props = defineProps({
	list: {
		type: Array,
		default: () => ([])
	},
	store_ls: {
		type: Array,
		default: () => ([])
	}
});

const titleTName = computed(() => {
	return tabType.value == 'into_warehouse' ? '入库' :
		tabType.value == 'transfer_warehouse' ? '调拨' :
			tabType.value == 'out_warehouse' ? '出库' : ''
})

const emit = defineEmits(['carCallBack']);
const totalPrice = computed(() => {
	let total = 0
	if (vList.value && vList.value.length > 0) {
		vList.value.forEach(item => {
			total += Number(item.price) * Number(item.dri_number_not)
		})
	}
	return total
})
const totalNumber = computed(() => {
	let number = 0
	if (vList.value && vList.value.length > 0) {
		vList.value.forEach(item => {
			number += Number(item.dri_number_not)
		})
	}
	return number
})

// 处理价格或数量变化
const onPriceChange = async (index, field, value) => {
	if (value === null || value === undefined) {
		return;
	}
	const newList = JSON.parse(JSON.stringify(vList.value));
	if (newList[index]) {
		newList[index][field] = value;
	}
	vList.value = newList;
	// 等待下一个 tick 确保 DOM 已更新
	await nextTick();
	// 实时保存到接口
	emit('carCallBack', vList.value);
};

const vList = ref([])
watch(() => props.list, (newVal) => {
	vList.value = newVal || []
}, {
	deep: true,
	immediate: true
})

</script>

<style lang="scss" scoped>
div {
	line-height: 1.5 !important;
}

.basc-info-card {
	box-sizing: border-box;
	overflow: hidden;
	padding: 0 12px;
	border-radius: 8px 8px 0 0;
	border: 1px solid #e2e8f0;
}

.mb-box-cell {
	box-sizing: border-box;
	overflow: hidden;
	padding: 6px 0;
	border-bottom: 1px solid #e2e8f0;
}

.obj-ls-box {
	margin-bottom: 10px;
	border-bottom: 1px solid #e9ecef;
	padding-bottom: 10px;
}

.obj-ls-box:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

.obj-gdimg-box {
	height: 50px;
	width: 50px;
	border-radius: 2px;
	border: 1px solid #f5f9f9;
	overflow: hidden;
	background-color: #f5f9f9;
}

.obj-avatar {
	height: 100%;
	width: 100%;
	border-radius: 6px;
}

.price-input-row {
	display: flex;
	flex-direction: row;
}

.price-input-item {
	display: flex;
	align-items: center;
	font-size: 12px;
}

.price-input,
.number-input {
	width: 120px;
}

::v-deep .el-input-number {
	.el-input__inner {
		padding-left: 8px;
		padding-right: 30px;
	}
}

::v-deep .el-input-number--mini {
	.el-input__inner {
		height: 24px;
		line-height: 24px;
	}

	.el-input-number__increase,
	.el-input-number__decrease {
		height: 12px;
		line-height: 12px;
	}
}

.del-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #e9f1f1;
	cursor: pointer;
	font-size: 14px;
	color: #f56c6c;
	margin-left: 10px;
}

::v-deep .el-empty {
	padding: 20px 0 0 !important;
}

.total-summary-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 6px 14px;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border-radius: 0 0 12px 12px;
	border: 1px solid #e2e8f0;
	border-top: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.total-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.total-label {
	font-size: 14px;
	color: #64748b;
	font-weight: 500;
}

.total-amount {
	font-size: 18px;
	font-weight: 700;
	color: #e11d48;
	text-shadow: 0 1px 2px rgba(225, 29, 72, 0.1);
}

.total-quantity {
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
}

.total-divider {
	width: 1px;
	height: 24px;
	background-color: #cbd5e1;
	margin: 0 24px;
}
</style>